<template>
  <div class="header">
    <div class="header-top">
      <img class="logo" src="../assets/yojoin.png" alt="">
      <div v-if="hideNav" class="iconfont nav-icon" @click="onNavIconHandler">&#xe66d;</div>
      <div v-else class="iconfont nav-icon" @click="onNavIconHandler">&#xe735;</div>
    </div>
    <common-slide>
      <div class="nav-box" v-if="!hideNav">
        <div class="nav">
          <div class="nav-item" v-for="(item, index) in navData" :key="index">
            <div v-if="item.children.length>0" class="router-link" @click="handleNavClick(item)">
              <span class="iconfont">&#xe614;</span>{{item.title}}
              <div class="item-children">
                <router-link v-for="(childItem, childIndex) in item.children" :key="childIndex" :to="childItem.jump" class="router-link-child" :class="{ indent: childItem.children.length == 0}">{{childItem.title}}</router-link>
              </div>
            </div>
            <router-link v-else :to="item.jump" class="router-link" :class="{ indent: item.children.length == 0}">{{item.title}}</router-link>
          </div>
        </div>
      </div>
    </common-slide>
  </div>
</template>

<script>
import CommonSlide from './Slide'

export default {
  name: 'HomeHeader',
  components: {
    CommonSlide
  },
  data () {
    return {
      hideNav: true,
      hasIndent: true,
      navData: [{
        title: '首页',
        jump: '/',
        children: []
      }, {
        title: '关于我们',
        jump: '/',
        children: [{
          title: '永卓简介',
          jump: '/about',
          children: []
        }, {
          title: '联系我们',
          jump: '/contact',
          children: []
        }, {
          title: '加入我们',
          jump: '/join',
          children: []
        }]
      }, {
        title: '合作品牌',
        jump: '/brand',
        children: [{
          title: 'Inglesina',
          jump: '/brand/detail/80',
          children: []
        }, {
          title: 'Elvie',
          jump: '/brand/detail/85',
          children: []
        }, {
          title: 'Aleva',
          jump: '/brand/detail/84',
          children: []
        }, {
          title: 'Babycocole',
          jump: '/brand/detail/86',
          children: []
        }, {
          title: 'Suavinex',
          jump: '/brand/detail/87',
          children: []
        }, {
          title: '其他品牌',
          jump: '/brand',
          children: []
        }]
      }, {
        title: '新闻中心',
        jump: '/news',
        children: []
      }]
    }
  },
  methods: {
    onNavIconHandler () {
      this.hideNav = !this.hideNav
    },
    handleNavClick (item) {

    }
  }
}
</script>

<style scoped lang="stylus">
  .header
    height 1.2rem
    line-height 1.2rem
    background-color #fff
    z-index 9999
    .header-top
      width 90%
      margin 0 auto
      display flex
      flex-direction row
      justify-content space-between
      align-items center
      .logo
        width 1.1rem
        height 0.8rem
      .nav-icon
        font-size 0.6rem
    .nav-box
      position fixed
      top 1.2rem
      left 0
      right 0
      bottom 0
      z-index 9
      background-color #fff
      color #999
      .nav
        width 90%
        margin 0 auto
        display flex
        flex-direction column
        .nav-item
          .router-link
            color #333
            border-bottom 0.02rem solid #e9e9e9
          .indent
            margin-left 0.4rem
          .item-children
            width 90%
            display flex
            flex-direction row
            flex-wrap wrap
            .router-link-child
              color #111
</style>
